
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="/comms/reset.css"></script>
<style>
    #read{
        text-align: center;
        align-content: center;

    }
    #read .read-box{
        width: 760px;
        background-color: #faeed7;
        padding: 0 100px;
    }
    #read .title{
        padding-top: 80px;
        padding-bottom: 10px;
        text-align: center;
    }
    #read .content{
        letter-spacing: 1px;
        line-height: 2em;
        text-indent: 2em;
        padding: .5em .3em;
    }
</style>
<body>
<div id="read">
    <div class="read-box">
        <div class="title">
            <h1>${requestScope.cname}</h1>
        </div>
        <div class="content" v-for="content in contents">
            <p>{{content}}</p>
        </div>
    </div>
    <p>
        <button @click="_lastChapter(chapterID)">上一章</button>
    </p>
    <p>
        <button @click="_nextChapter(chapterID)">下一章</button>
    </p>
</div>
<script src="/comms/jquery.js"></script>
<script src="/comms/vue.js"></script>
<script>
    function request(url, method, fn, data) {
        $.ajax({
            url: url,
            data: data,
            method: method,
            dataType: "json",
            success: fn,
        })
    }
</script>
<script>
    let v = new Vue({
        el: "#read",
        data: {
            contents:[],
            chapterID: ""
        },
        created: function () {
            this.initContent("${sessionScope.chapterID}");
        },
        methods: {
            initContent: function (chapterID) {
                let this_ = this;
                this.contents = [];
                this.chapterID = chapterID;
                request("/chapter/selectChapterById?chapterID=" + chapterID, "GET", function (data) {
                    if (data.flag) {
                        this_.contents = data.data;
                    } else {
                        console.log(data.message);
                    }
                })
            },
            _nextChapter: function (chapterID) {
                location.href="/chapter/next?chapterID="+chapterID;
            },
            _lastChapter:function (chapterID) {
                location.href="/chapter/last?chapterID="+chapterID;
            }
        }
    })
<body>
<h1>商品列表:</h1>
<h2>
    <a href="/uploadNovel.jsp">添加书籍</a>
</h2>

<div id="novel-list">
    <table>
        <thead>
        <tr>
            <th>uid</th>
            <th>nname</th>
            <th>ncount</th>
            <th>nid</th>
            <th>synopsis</th>
            <th>nsrc</th>
            <th>code</th>
            <th>imgsrc</th>
            <th>类别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="novel in novels">
            <td>{{novel.uid}}</td>
            <td>{{novel.nname}}</td>
            <td>{{novel.ncount}}</td>
            <td>{{novel.nid}}</td>
            <td>{{novel.synopsis}}</td>
            <td>{{novel.nsrc}}</td>
            <td>{{novel.code}}</td>
            <td>{{novel.imgsrc}}</td>
            <td>
                <a href="">修改</a>|<a href="">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>


<script src="/comms/jquery.js"></script>
<script src="/comms/vue.js"></script>
<script>

    let v = new Vue({
        el: "#novel-list",
        data: {
            goods: []
        },
        created: function () {
            let this_ = this;
            $.ajax({
                url: "/novel",
                method: "GET",
                dataType: "json",
                success: function (data) {
                    this_.goods = data.data;
                }
            })
        }
    })

</script>
</body>
</html>